<template>
 <div class="info">
   <el-row>
    <el-col :span="3" style="text-align: right">
      <el-icon><CircleCheck/></el-icon>
    </el-col>
    <el-col :span="16" style="height: 104px;" >
      <div style="line-height: 52px;margin-left: 20px">订单提交成功！去付款咯~</div>
      <div style="line-height: 52px;margin-left: 20px">请尽快付款以免超时！！！</div>
    </el-col>
    <el-col :span="5" style="height: 104px;line-height: 104px;text-align: right">
      应付总额：￥<span class="total"> {{ order.price }} </span>元
    </el-col>
   </el-row>
   <div>
     <el-collapse>
       <el-collapse-item title="订单详情" name="1">
         <el-row>
            <el-col :span="2">订单号：</el-col>
            <el-col :span="10">{{order.id}}</el-col>
         </el-row>
         <el-row>
            <el-col :span="2">收货信息：</el-col>
            <el-col :span="10">{{order.addrDetail}}</el-col>
         </el-row>
         <el-row>
            <el-col :span="2">商品名称：</el-col>
            <el-col :span="10">
              <div v-for="(detailList,index) in order.detailList" :key="index">
                {{detailList.good.name}} {{detailList.good.color}} {{detailList.good.version}}
              </div>
            </el-col>
         </el-row>
       </el-collapse-item>
     </el-collapse>
   </div>
 </div>
  <div class="express">
    <div class="title">快递</div>
    <ul>
      <li :class="{selectAddr :express.type == 0}" @click="express.type = 0">京东快递</li>
      <li :class="{selectAddr :express.type == 1}" @click="express.type = 1">顺丰快递</li>
      <li :class="{selectAddr :express.type == 2}" @click="express.type = 2">韵达快递</li>
      <li :class="{selectAddr :express.type == 3}" @click="express.type = 3">中国邮政</li>
    </ul>
  </div>
  <div class="pay">
    <div>
        <div class="title">支付工具</div>
        <ul>
          <li :class="{selectAddr :payType.type == 0}" @click="payType.type = 0">余额支付</li>
          <li :class="{selectAddr :payType.type == 1}" @click="payType.type = 1">支付宝支付</li>
          <li :class="{selectAddr :payType.type == 2}" @click="payType.type = 2">微信支付</li>
          <li :class="{selectAddr :payType.type == 3}" @click="payType.type = 3">银行卡支付</li>
          <li :class="{selectAddr :payType.type == 4}" @click="payType.type = 4">其他</li>
        </ul>
    </div>
    <div>
      <el-input type="password" v-model="payPwd" placeholder="请输入支付密码" style="margin: 10px 10px;width: 200px; "></el-input>
      <el-button type="danger" @click="pay">支付</el-button>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {Select} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()
//保存订单信息
const order = ref({})
//支付方式
const payType = ref({
  type: 0
})
//快递公司
const express = ref({
  type: 0
})
//支付密码
const payPwd = ref("");
//根据订单id查询相关信息 地址 商品
function getOrder(){
  //获取路径上的订单id
  const orderId = route.query.orderId;
  //根据订单id查询相关信息 地址 商品
  orderApi.selectById(orderId)
      .then(resp => {
        if(resp.code == 10000){
          order.value = resp.data
        }else {
          ElMessage.error(resp.msg)
        }
      })

}
//支付
function pay(){
  orderApi.pay({
    orderId:route.query.orderId,
    payPwd:payPwd.value,
    payType:payType.value.type
  })
      .then(resp => {
          if(resp.code == 10000){
            ElMessage.success(resp.msg)
            //跳转用户订单详情页
            router.push('/user/orderList')
          }else {
            ElMessage.error(resp.msg)
          }
      })
}


getOrder();
</script>

<style scoped>
.info , .pay,.express{
  margin-top: 30px;
  background-color: #FFF;
  padding: 30px;
}
.info .el-icon{
  font-size: 100px;
  color: #83C44EFF;
}
.info .total{
  font-size: 18px;
  font-weight: bold;
  color: var(--theme-color);
}
.pay .title{
  font-weight: bold;
  font-size: 18px;
}
.express .title{
  font-weight: bold;
  font-size: 18px;
}
.pay ul li{
  margin: 10px 10px;
  padding: 0px 10px;
  float: left;
  border: 2px solid #AAA;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.express ul li{
  margin: 10px ;
  padding: 0px 10px;
  float: left;
  border: 2px solid #AAA;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.express ul li:hover{
  border: 2px solid red;
}
.express  .selectAddr{
  border: 2px solid red;
}
.pay ul li:hover{
  border: 2px solid red;
}
.pay  .selectAddr{
  border: 2px solid red;
}
</style>